<template>
    <div class="box">
        <div class="header">
            <div class="logo">
                <img src="@/assets/logo.png" alt="logo" srcset="" style="width: 55px;height: 55px;">
                <span class="title">陨星（Docker容器化管理平台）</span>
            </div>
    
            <!-- 搜索框 -->
            <div class="search">
                <el-input placeholder="请输入内容" v-model="input" clearable>
                </el-input>
    
                <div class="btn">
                    <el-row>
                        <el-button type="primary">搜索</el-button>
                    </el-row>
                </div>
            </div>
            <div class="date">{{ localTime }}</div>
            <div class="photo">
                <div>
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div class="photo_title">管理员</div>
                <!-- <button @click="gettime()">打印时间</button> -->
            </div>
        </div>
    </div>
</template>

<script>
import time  from "@/utils/FromatDate"
export default {
    data(){
        return{
            localTime:"00:00:00",
            input:""
        }
    },
    methods:{
        // 获取当前时间
        gettime(){
            this.timer = setInterval(() => {
                this.localTime = time.getLocalTime_Template()
                // console.log(time.getLocalTime_Template());
            }, 1000);
            
        }
    },
    created(){
        this.gettime()
    },
    beforeDestroy() {
    // 组件销毁时清除定时器，避免内存泄漏
    clearInterval(this.timer);
  }
    

    // updated(){
    //     this.gettime()
    // }
}
</script>

<style scoped>
.header {
    width: 100%;
    height: 60px;
    /* background-color: #0a82e5; */
    /* background-color: #4e9e7f; */
    background-color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    flex-basis: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    font-size: 1.5em;
    color: #fff;
}
.search{
    flex-basis: 30%;
    display: flex;
}
.search > .btn{
    margin-left: 8px;
}
.date{
    flex-basis: 26%;
    display: flex;
    justify-content: right;
    font-size: 1.2em;
    color: #fff;
    
    /* margin-left: auto; */
}
.photo{
    flex-basis: 10%;
    display: flex;
    align-items: center;
}
.photo_title{
    margin-left: 6px;
    font-size: 1.2em;
    color: #fff;
}
.el-submenu,.el-menu-item:hover{
    /* background-color:#4e9e7f; */
}
</style>